import classNames from 'classnames';
import React from 'react';

interface DividerProps {
    // 偏移量
    contentPosition?: string
    // 分割线的方向
    direction?: "row" | "column"
    children?: React.ReactNode
    className?: string
    style?: React.CSSProperties
}

const Divider: React.FC<DividerProps> = (props) => {

    const { contentPosition, direction, children, className, style } = props;

    const classes = classNames(className, `yulang-divider-container-${direction}`)

    const styles = () => {
        return {
            ...{
                "--content-position--": { left: "20%", right: "80%", center: "50%" }[contentPosition as string] ??
                    contentPosition
            }, ...style
        } as React.CSSProperties
    }

    return <div
        className={classes}
        style={styles()}
    >
        <div className={'yulang-divider-content'}>{children}</div>
    </div>
}

Divider.defaultProps = {
    contentPosition: 'center',
    direction: 'row'
}

export default Divider;